<template>
  <div class="px-2 flex flex-col">
    <div class="p-8 border shadow-sm">
      <div class="flex align-middle">
        <div class="board-title">企业信息</div>
        <el-button
          class="w-24 h-9 ml-4 rounded-full border-blue-500 text-blue-600"
          @click="$router.push('/user/baseInfo')"
        >
          修改信息</el-button
        >
      </div>

      <div class="flex flex-col align-middle">
        <div class="text-sm flex align-middle justify-around flex-wrap">
          <div class="flex align-middle mt-8 w-1/2">
            <span class="text-t999 text-right w-24">企业名称</span>
            <span class="pl-4 text-black">{{
              userInfo && userInfo.companyName ? userInfo.companyName : "暂无"
            }}</span>
          </div>
          <div class="flex align-middle mt-8 w-1/2">
            <span class="text-t999 text-right w-24">统一信用代码</span>
            <span class="pl-4 text-black">{{
              userInfo && userInfo.creditCode ? userInfo.creditCode : "暂无"
            }}</span>
          </div>
          <div class="flex align-middle mt-8 w-1/2">
            <span class="text-t999 text-right w-24">所属领域</span>
            <span class="pl-4 text-black">
              {{
               fieldName(userInfo && (userInfo.fieldId ? userInfo.fieldId : [])) 
            }}

            </span>
          </div>
          <div class="flex align-middle mt-8 w-1/2">
            <span class="text-t999 text-right w-24">注册地址</span>
            <el-cascader
              v-model="area"
              :options="areaOptions"
              :props="{
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'childern',
              }"
              placeholder="请选择"
              clearable
              disabled
              @change="handleChange"
              v-if="userInfo && area"
              class="hidden-cascader-border"
            />
            <span class="pl-4 text-black" v-else>暂无</span>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-12 p-8 border shadow-sm">
      <div class="board-title">快捷入口</div>
      <div class="mt-8 flex justify-around align-middle items-center">
        <div
          class="
            flex flex-col
            justify-center
            align-middle
            items-center
            cursor-pointer
            hover:text-blue-400 hover:font-bold
          "
          v-for="(item, index) in linkList"
          :key="'link' + index"
          @click="jumpTo(item.path)"
        >
          <el-image
            :src="item.icon"
            fit="fill"
            class="block mx-auto w-8 h-8 rounded-full"
          />
          <div class="mt-2">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSpecificArea } from "@/api/system/user";
import { getCompanyInfo } from "@/api/manageInformation/baseInfo";

export default {
  name: "userIndex",
  components: {},
  data() {
    return {
      // 用户id
      companyManagerId: undefined,
      // 用户信息
      userInfo: {},

      linkList: [
        {
          name: "在线申报",
          path: "/policyDeclare",
          icon: require("@/assets/images/personCenter/navi-1.png"),
        },
        {
          name: "政策文件",
          path: "/newsModal/policy",
          icon: require("@/assets/images/personCenter/navi-2.png"),
        },
        {
          name: "通知公告",
          path: "/newsModal/notice",
          icon: require("@/assets/images/personCenter/navi-3.png"),
        },
        // {
        //   name: "企业测评",
        //   path: "/exam"
        // }
      ],

      // 所属区域存储
      area: [],
      // 省市区三级联动选项
      areaOptions: [],

      // 所属领域
      companyFieldList: [],
    };
  },
  computed: {
    // 根据字典返回数据输出名称
    fieldName() {
      return (id) => {
        console.log('---uid');
        console.log(id);
        return this.calcMultiple(id, this.companyFieldList);
      };
    },
  },
  mounted() {
    // 获取所需字典
    this.initDictList();

    // 获取用户id
    this.companyManagerId = this.$store.state.user.companyId;

    // 获取到省市区信息以后 再开始赋值
    this.getSpecificAreaFun().then(() => {
      // 如果存在用户id则进行用户信息获取
      if (this.companyManagerId) {
        getCompanyInfo(this.companyManagerId).then((res) => {
          this.userInfo = res.data;

          if (this.userInfo.declareAddress) {
            // 将返回的数组重新转换为number类型 防止数据无法还原
            this.area = this.userInfo.declareAddress.split(",").map(Number);
          }

          // 回显所属领域
          if (this.userInfo.fieldId) {
            this.userInfo.fieldId = this.userInfo.fieldId.split(",");
          }
        });
      }
    });
  },
  methods: {
    /* 计算属性封装 */
    // 单选数据计算
    calcSingle(id, list, label = "dictLabel") {

      let res = list.find((val, key) => {
        return val.dictValue == id;
      });

      console.log(res);
      if (res) {
        return res[label];
      }
      return "暂无";
    },
    // 多选数据计算
    calcMultiple(ids, list, label = "dictLabel") {
      // 检查当前传入的ids是否为数组，如果不是继续判断
      if (!Array.isArray(ids)) {
        // 检测当前的ids是否为空 如果为空直接退出返回
        if (!ids) {
          return "暂无";
        }

        // 检测当前的id字符串内是否有逗号，如果有，则在进行判断
        if (ids.indexOf(",") != -1) {
          let newIds = ids.split(",");
          // 切割完以后 如果当前的新ids内只有一项 则单独取出来 走单选计算, 否则走多选计算
          if (newIds.length > 1) {
            return this.calcMultiple(newIds, list);
          } else {
            
            return this.calcSingle(newIds[0], list);
          }
        } else {
          
          return this.calcSingle(ids, list);
        }
      } else {

        // 如果当前的ids长度大于1 则走此处 否则走单选计算
        if (ids.length > 1) {
          let res = "";
          list.forEach((pVal) => {
            ids.forEach((val) => {
              if (pVal.dictValue == val) {
                res += pVal[label] + ",";
              }
            });
          });
          
          return res.substr(0, res.length - 1);
        } else if (ids.length == 1) {
          
          return  this.calcSingle(ids[0], list);
        } else {
          
          return "暂无";
        }
      }
    },
    /* END */

    /* 查询省市区信息 */
    getSpecificAreaFun() {
      return new Promise((resolve, reject) => {
        getSpecificArea().then((res) => {
          this.areaOptions = [res.data];
          resolve();
        });
      });
    },

    // 初始化，获取当前页面所需字典
    initDictList() {
      this.getDicts("company_field").then((res) => {
        if (res.code == 200) {
          this.companyFieldList = res.data;
        }
      });
    },

    /* 根据省市区三级联动变化获取数据 */
    handleChange(value) {},
    /* END */

    // 跳转
    jumpTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.board-title {
  @apply font-bold text-xl;

  &::after {
    content: "";
    display: block;
    width: 5rem;
    height: 2px;
    margin-top: 0.5rem;

    @apply bg-blue-700;
  }
}

.hidden-cascader-border {
  @apply -mt-2 w-full;

  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: transparent;
    border-color: transparent;
    color: #333;
    cursor: text;
  }

  ::v-deep .el-input__suffix {
    display: none;
  }
}
</style>
